<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="item">
            <img src="https://fakeimg.pl/60x60/">
            <span style="display: block;">图片1号</span>
        </div>
        <div class="item">
            <img src="https://fakeimg.pl/50x50/">
            <span style="display: block;">图片2号</span>
        </div>
        
        <div class="item">
            <img src="https://fakeimg.pl/50x50/">
            <span style="display: block;">图片3号</span>
        </div>
        <div class="item">
            <img src="https://fakeimg.pl/50x50/">
            <span style="display: block;">图片4号</span>
        </div>
        <div class="item">
            <img src="https://fakeimg.pl/50x50/">
            <span style="display: block;">图片4号</span>
        </div>
           
        
    </div>
</body>
<style>
    body,
    html {
        height: 100%;
    }

    .container {
        display: flex;
        flex-wrap: wrap;
        width: 90%;
    }

    .item {
        /* flex: 1;  */
         /* width: 0;  */
        width: 25%;
        text-align: center;
        padding: 5px 0;
       
    }

    .item img {
        border-radius: 50%;
    }
</style>

</html>